<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="120px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="NVR编号" prop="sxtbh" required >
						<el-input v-model="dataForm.sxtbh" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="NVR名称" prop="sxtmc" required >
						<el-input v-model="dataForm.sxtmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="安装位置" prop="azwz" required >
						<el-input v-model="dataForm.azwz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属区域" prop="ssqy" >
						<el-select filterable v-model="dataForm.ssqy" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssqyOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="视频地址" prop="spldz" required >
						<el-input v-model="dataForm.spldz" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经纬度（度）" prop="jwd" required >
						<el-input v-model="dataForm.jwd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="端口号" prop="dkh" required >
						<el-input v-model="dataForm.dkh" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="通道号" prop="tdh" required >
						<el-input v-model="dataForm.tdh" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户名" prop="user" required >
						<el-input v-model="dataForm.user" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="密码" prop="pass" required >
						<el-input v-model="dataForm.pass" type="password" placeholder="请输入" :disabled="bjdis" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="视频监控方式" prop="spjkfs" required >
						<el-select v-model="dataForm.spjkfs" placeholder="请选择" :disabled="bjdis" clearable :style='{"width":"100%"}' @change="spjkfs">
							<el-option v-for="(item, index) in spjkfsOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="视频监控厂家" prop="spjkcj">
						<el-select v-model="dataForm.spjkcj" placeholder="请选择" clearable :style='{"width":"100%"}' :disabled="cjdisabled">
							<el-option v-for="(item, index) in spjkcjOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="平面图相对位置" prop="xdwz" required >
						<el-input v-model="dataForm.xdwz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import md5 from 'js-md5'
import 'qrcodejs2/jquery.min.js'
import { mapGetters, mapState } from 'vuex'
import VIDEOURL from '../../../utils/define'

export default {
	computed: {
		...mapState({
		showLanguage: state => state.settings.showLanguage,
		showSearch: state => state.settings.showSearch,
		showSettings: state => state.settings.showSettings,
		}),
		...mapGetters(['device', 'userInfo']),
  	},
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
			sxtbh:undefined,
			sxtmc:undefined,
			azwz:undefined,
			ssqy:undefined,
			spldz:undefined,
			jwd:'(0,0)',
			dkh:undefined,
			tdh:undefined,
			user:undefined,
			pass:undefined,
			spjkfs:undefined,
			spjkcj:undefined,
			xdwz:undefined,

        },
		bjdis: false,
		cjdisabled: false,
        rules: {
			sxtbh:[
			{
				required:true,
				message:'请输入摄像头编号',
				trigger:'blur'
			},
			],
			sxtmc:[
			{
				required:true,
				message:'请输入摄像头名称',
				trigger:'blur'
			},
			],
			azwz:[
			{
				required:true,
				message:'请输入安装位置',
				trigger:'blur'
			},
			],
			// ssqy:[
			// {
			// 	required:true,
			// 	message:'请输入所属区域',
			// 	trigger:'blur'
			// },
			// ],
			spldz:[
			{
				required:true,
				message:'请输入视频地址',
				trigger:'blur'
			},
			],
			jwd:[
			{
				required:true,
				message:'请输入经纬度（度）',
				trigger:'blur'
			},
			],
			dkh:[
			{
				required:true,
				message:'请输入端口号',
				trigger:'blur'
			},
			],
			tdh:[
			{
				required:true,
				message:'请输入通道号',
				trigger:'blur'
			},
			],
			user:[
			{
				required:true,
				message:'请输入用户名',
				trigger:'blur'
			},
			],
			pass:[
			{
				required:true,
				message:'请输入密码',
				trigger:'blur'
			},
			],
			spjkfs:[
			{
				required:true,
				message:'请输入视频监控方式',
				trigger:'blur'
			},
			],
			spjkcj:[
			{
				required:true,
				message:'请输入视频监控厂家',
				trigger:'blur'
			},
			],
			xdwz:[
			{
				required:true,
				message:'请输入平面图相对位置',
				trigger:'blur'
			},
			],

        },

		ssqyOptions:[],
		spjkfsOptions:[{"fullName":"H5_STREAM","id":"H5_STREAM"},{"fullName":"H5_ONVIF","id":"H5_ONVIF"},{"fullName":"设备SDK","id":"设备SDK"}],
		spjkcjOptions:[{"fullName":"H5_DEV_HIK","id":"H5_DEV_HIK"},{"fullName":"H5_DEV_DH","id":"H5_DEV_DH"}],

		UrlViod: '',//获取视频功能数据地址
		gongNeng:'', 
      }
    },
    created() {
		this.getSsqyOptions();
        this.UrlViod = VIDEOURL.VIDEOURL;
    },
	mounted(){
		
	},
    methods: {
		getSsqyOptions()
		{
			previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
				this.ssqyOptions = res.data
			})
		},

        goBack() {
            this.$emit('refresh')
        },
		init(id, isDetail) {
			if(id !== undefined){
				this.gongNeng = '编辑';
			}else{
				this.gongNeng = '新增';
			}
			
			this.dataForm.id = id || 0;
			this.visible = true;
			this.isDetail = isDetail || false;
			this.$nextTick(() => {
				this.$refs['elForm'].resetFields();
				if (this.dataForm.id) {
					request({
					url: '/api/System/SXTGL/' + this.dataForm.id,
					method: 'get'
					}).then(res =>{
						this.dataForm = res.data;
						this.spjkfs();
					})
				}
			})
			if(id !== undefined){
				this.bjdis = true;
			}
		},
		// 表单提交
		dataFormSubmit() {
			if(this.gongNeng == '新增'){
				var objData = this.dataForm;
				if(this.dataForm.spjkfs == '设备SDK'){
					objData.Sys_PlacingVideoType = this.dataForm.spjkfs;
					this.vioSubAddC();
				}else{
					objData.Sys_PlacingVideoType = '摄像头';
					this.vioSubAddC();
				}			
				// this.vioSubAddC();
			}else if(this.gongNeng == '编辑'){
				this.$refs['elForm'].validate((valid) => {
					if (valid) {
						if (!this.dataForm.id) {
							const formData = {
								...this.dataForm,
								pass: md5(this.dataForm.pass)
							}
							request({
								url: '/api/System/SXTGL',
								method: 'post',
								data: formData,
							}).then((res) =>{
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () =>{
										this.visible = false;
										this.$emit('refresh', true);
									}
								})
							})
						} else {
							const formData = {
								...this.dataForm
							}
							request({
								url: '/api/System/SXTGL/' + this.dataForm.id,
								method: 'PUT',
								data: formData
							}).then((res) =>{
								this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
									onClose: () =>{
										this.visible = false;
										this.$emit('refresh', true);
									}
								})
							})
						}
					}
				})
			}
		},
		spjkfs(){
			if(this.dataForm.spjkfs == "H5_STREAM" || this.dataForm.spjkfs == "H5_ONVIF"){
				this.dataForm.spjkcj = undefined;
				this.cjdisabled = true;
				this.rules.spjkcj = [];
			}else if(this.dataForm.spjkfs == "设备SDK"){
				this.cjdisabled = false;
				this.rules.spjkcj = [{required:true,message:'请输入视频监控厂家',trigger:'blur'}];
			}
		},
		/*走视频接口*/
		vioSubAddC() {
			var nav = this.dataForm.spjkfs;
			var nameurl = ''
			if (nav == 'H5_STREAM') {
				nameurl = 'AddSrcRTSP';
				var objdata = {
					name: this.dataForm.sxtmc,
					token: this.dataForm.sxtbh,
					user: this.dataForm.user,
					password: this.dataForm.pass,
					url: this.dataForm.spldz,
					audio: true,
					session: this.userInfo.userId //获取用户ID
				};
			} else if (nav == 'H5_ONVIF') {
				nameurl = 'AddSrcONVIF';
				var objdata = {
					session: this.userInfo.userId, //获取用户ID
					token: this.dataForm.sxtbh,
					name: this.dataForm.sxtmc,
					user: this.dataForm.user,
					password: this.dataForm.pass,
					ip: this.dataForm.spldz,  //通讯地址(视频地址)
					port: this.dataForm.dkh,
					url: this.dataForm.spldz,
					audio: true,

				};
			} else {
				var hkdh = this.dataForm.spjkcj;
				if (hkdh == 'H5_DEV_HIK') {
					nameurl = 'AddDeviceHik'
				} else {
					nameurl = 'AddDeviceDh'
				}
				var objdata = {
					name: this.dataForm.sxtmc,
					token: this.dataForm.sxtbh,
					user: this.dataForm.user,
					password: this.dataForm.pass,
					audio: true,
					ip: this.dataForm.spldz,
					port: this.dataForm.dkh,
					session: this.userInfo.userId //获取用户ID
				};
			}
			var object = {
				url: this.UrlViod + 'api/v1/' + nameurl,
				type: 'get',
				obj: objdata,
				async: false,
				// Callback: this.vioSubAddCsjccel(),
			};

			this.ajaxVido(object);

		},
		
		ajaxVido(object) {
			let that = this;
			$.ajax({
				url: object.url,
				type: object.type,
				dataType: "json",
				data: object.obj,
				async: object.async,
				success: function (data) {
					if(data.bStatus == true && data.strCode == "Add successfully"){
						that.$refs['elForm'].validate((valid) => {
							if (valid) {
								if (!that.dataForm.id) {
									const formData = {
										...that.dataForm,
										pass: md5(that.dataForm.pass)
									}
									request({
										url: '/api/System/SXTGL',
										method: 'post',
										data: formData,
									}).then((res) =>{
										that.$message({
											message: res.msg,
											type: 'success',
											duration: 1000,
											onClose: () =>{
												that.visible = false;
												that.$emit('refresh', true);
											}
										})
									})
								} else {
									const formData = {
										...this.dataForm
									}
									request({
										url: '/api/System/SXTGL/' + that.dataForm.id,
										method: 'PUT',
										data: formData
									}).then((res) =>{
										that.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
											onClose: () =>{
												that.visible = false;
												that.$emit('refresh', true);
											}
										})
									})
								}
							}
						})
					}
				}
			})
		},	

    }
}
</script>